<template>
  <div>
    <d2-container>
      <el-button type="primary" style="margin-bottom:20px;" @click="dialogRole = true">添加</el-button>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="Role_id"
          label="序号"
          width="">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="">
        </el-table-column>
        <el-table-column
          prop="son"
          label="权限列表">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="updates(scope.row.name,scope.row.Role_id)">编辑</el-button>
            <el-button type="primary" size="mini" @click="managePes_skillDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--角色添加-->
      <el-dialog
        title="添加"
        :visible.sync="dialogRole"
        width="30%">
        <el-form status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称:" prop="pass">
            <el-input type="text" v-model="role_name" placeholder="请输入权限名称" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限列表:" prop="pass">
            <el-select v-model="role_ids" multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.ps_id"
                :label="item.ps_name"
                :value="item.ps_id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogRole = false">取 消</el-button>
          <el-button type="primary" @click="managePes_skillAppend()">确 定</el-button>
        </span>
      </el-dialog>
      <!--角色编辑-->
      <el-dialog
        title="编辑"
        :visible.sync="dialogRole_audit"
        width="30%">
        <el-form status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称:" prop="pass">
            <el-input type="text" v-model="RolemanagePes_name" placeholder="请输入权限名称" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限列表:" prop="pass">
            <el-select v-model="RolemanagePes_skill" @change="changes" multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.ps_id"
                :label="item.ps_name"
                :value="item.ps_id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogRole_audit = false">取 消</el-button>
          <el-button type="primary" @click="managePes_skillUpdata()">确 定</el-button>
        </span>
      </el-dialog>
    </d2-container>
  </div>
</template>

<script>
  import {managePes, managePes_skill,authoritylist} from '@api/sys.login'

  export default {
    name: "index",
    data() {
      return {
        value:"",
        tableData: [],
        dialogRole: false,
        dialogRole_audit:false,
        RolemanagePes_skill:"",
        RolemanagePes_name: "",
        ruleFormRole: {
          name: "",
          router: "",
          methods: "",
        },
        role_name:"",
        role_ids:[],
        options:[],
        RolemanagePes_ID:""
      }
    },
    created() {
      this.getListData()
      this.getAuthData()
    },
    methods: {
      changes(val){
        console.log(val);
        this.RolemanagePes_skill = val
      },
      updates(name,Role_id){
        this.dialogRole_audit = true;
        this.RolemanagePes_name =name;
        this.RolemanagePes_ID =Role_id
      },
      getAuthData() {
        authoritylist().then(res => {
          console.log('权限列表', res.date)
          let arr = []
          res.date.forEach((item) => {
            if(item.children!=undefined){
              arr.push(item.children)
            }
          })
          this.options = arr.flat(Infinity)
          console.log(this.options);
        })
      },
      //角色删除
      managePes_skillDelete(data) {
        let params = {
          code: "2",
          role_id: data.Role_id,
        }
        managePes_skill(params).then(res => {
          this.listdata = []
          this.getListData()
        })
      },
      //角色增加
      managePes_skillAppend() {
        let params = {
          code: "0",
          Role_name: this.role_name,
          Role_ps_ids:this.role_ids
        }
        managePes_skill(params).then(res => {
          console.log(res);
          this.dialogRole = false
          this.getListData()
        })
      },
      //角色修改
      managePes_skillUpdata() {
        let params = {
          code: "1",
          role_id: this.RolemanagePes_ID,
          role_name:this.RolemanagePes_name,
          role_ps_ids:this.RolemanagePes_skill
        }
        managePes_skill(params).then(res => {
          console.log(res);
          this.dialogRole_audit = false
          this.getListData()
        })
      },
      //角色列表
      getListData() {
        managePes().then(res => {
          this.tableData = res.data
            // .map((item)=>{
            //   item.son = item.son.join('，')
            //   return item
          // })
          console.log('角色列表', this.tableData)
        })
      },
    }
  }
</script>

<style scoped>

</style>
